<template>
    <div class='container'>
        <!--<div class="header-title">就医须知</div>
        <div class="nickname">
            <a href="javascript:;">@小康管家</a>
        </div>-->
        <div class="content">
            <div class="item" v-for="item, index in list" @click="previewFile(item.pdf)">
                <van-image width="80" height="80" fit="cover" :src="item.src" />
                <div class="introduce">
                    <div>
                        {{ item.name }}
                    </div>
                    <div class="see">
                        <div class="read">
                            <template v-if="exist(item.pdf)">
                                已阅读
                            </template>
                        </div>
                        <div>
                            点击查看
                        </div>
                        
                    </div>
                </div>
            </div>

            <!-- <h3>【呼叫器（按键标准款）操作视频】</h3>
            <p>
                <van-button type="info" native-type="submit">点击进入->></van-button>
            </p>

            <h3>【呼叫器（按键智能款）操作视频】</h3>
            <p>
                <van-button type="info" native-type="submit">点击进入->></van-button>
            </p>

            <h3>【呼叫器（平板智能款）操作视频】</h3>
            <p>
                <van-button type="info" native-type="submit">点击进入->></van-button>
            </p> -->
        </div>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
    data() {
        return {
            isshowpdf:false,
            src:"../../../src/assets/images/shengyu.png",
            arr:[],
            list: [
                { src: require("../../../src/assets/images/yibao.png"), name: "医保住院患者就医流程", pdf: "/static/pdffile/yibao.pdf" },
                { src: require("../../../src/assets/images/menzhen.png"), name: "门诊慢特病申请及就诊须知", pdf: "/static/pdffile/menzhen.pdf" },
                { src: require("../../../src/assets/images/zhuyuan.png"), name: "住院待遇保障及结算须知", pdf: "/static/pdffile/zhuyuan.pdf" },
                { src: require("../../../src/assets/images/yidi.png"), name: "异地医保病人就医流程", pdf: "/static/pdffile/yidi.pdf" },
                { src: require("../../../src/assets/images/yaopin.png"), name: "国家谈判药品使用须知", pdf: "/static/pdffile/yaopin.pdf" },
                { src: require("../../../src/assets/images/shengyu.png"), name: "生育保险待遇享受及流程", pdf: "/static/pdffile/shengyu.pdf" },
            ]
        }
    },
    mounted(){
        this.arr = []
        this.list.forEach(item=>{
            if(localStorage.getItem(item.pdf)){
                this.arr.push(item.pdf)
            }
        })
    },  
    methods: {
        exist(pdf){
            return this.arr.some(item=>item==pdf)
        },
        previewFile(url) {
            let u = navigator.userAgent;
            let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
            localStorage.setItem(url,url)
            // 判断类型
            if (isAndroid){
                // 加载在线地址
                //url = "/static/pdfjs/web/viewer.html?file="+encodeURIComponent(url);
                // 加载本地文件
                url = "/static/pdfjs/web/viewer.html?file="+url;
            }
            const wo = window.open(url,"_blank");
            if (wo == null) {
                window.location.href = url;
            }
            /*const wo = window.open(pdf, "_blank")
            if (wo == null) {
                window.location.href = pdf;
            }*/
        },
    }
}
</script>
<style lang="less" scoped>
.container {
    padding: 30px 8px 50px 10px;
    box-sizing: border-box;
    min-height: 100vh;
    background-color: #faf7f7;

    .header-title {
        text-align: center;
        font-size: 20px;
        font-weight: 800;
    }

    .nickname {
        padding-left: 10px;
        font-size: 14px;
        margin: 10px 0 20px 0;

        a {
            color: #10AEFF;
            margin-right: 17px;
        }

        span {
            color: #999999;
        }
    }

    .content {
        .item {
            background: white;
            width: 95%;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 13px 10px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(4, 4, 4, .1);
            display: flex;
            margin-bottom: 10px;

            // align-items: center;
            .introduce {
                font-size: 17px;
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                flex: 1;
                justify-content: space-between;

                // align-items: center;
                .see {
                    .read{
                        color: red;
                    }
                    font-size: 15px;
                    color: #10AEFF;
                    display: flex;
                    justify-content: space-between;
                }
            }
        }

        // h3{
        //     font-size: 17px;
        //     margin-bottom: 6px;
        // }
        // p{
        //     font-size: 15px;
        //     text-align: justify;
        //     line-height: 26px;
        //     text-indent: 2em;
        //     margin-bottom: 16px;
        // }
    }

}
</style>
